[flex], [flex]>*, [flex]>[flex]{overflow: visible!important;}
*{-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}

body{
    height: 100%;
    background: #2e3061;
    padding: .3rem .34rem;
}

.logo{
    width: 1.24rem;
}
.weixin{
    width: 1.70rem;
}
.f2>p{
    font-size: .28rem;
    color: white;
    margin-bottom: .22rem;
}.f2>a{
    font-size: .28rem;
    color:white;
    margin: .4rem 0;
    text-decoration:underline;
    z-index: 15;
 }
.f2>img{
    width: 4rem;
}

.libai{
    width:5.4rem;
    position: absolute;
    left: -1rem;
    top: 2.6rem;

}
.hanxin{
    width:2.8rem;
    position: absolute;
    right: 0;
    top: 2.6rem;
}
.f3{
    height:9.38rem;
    background-image:url(../img/kuang.png) ;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index:10;
    text-align: center;
}

.p1{
    font-size: .36rem;
    color: white;
    margin: .56rem 0 .2rem;
}
.p2{
    font-size: .24rem;
    color: white;
    margin-bottom: .26rem;
}
.span1{
    font-size: .24rem;
    color: #e8de16;
    text-decoration: underline;
}
.lan{
    width: 90%;
    border: 2px solid #2940b1;
    border-radius: 8px;
    padding: .2rem;
}
.p3{
    font-size: .2rem;
    color: white;
    margin-bottom: .03rem;
}
.p3>a{
    text-decoration: underline;
}
.span2{
    font-size: .2rem;
    color: #e8de16;
    text-decoration: underline;
}
.list{
    padding-top: .2rem;
    width: 100%;
    font-size: 0;
}
.list>li{
    margin-right: 3.333%;
    width: 22.5%;
    height: 1.75rem;
    position: relative;
    perspective: 500;
    -webkit-perspective: 500;
}


.list>li:last-child{
    margin-right: 0;
}
.list img{
    width: 100%;
    position: absolute;
    left: 0;
    top:0;
    backface-visibility:hidden;/*该属性定义当元素不面向屏幕时是否可见*/
    -webkit-backface-visibility:hidden;/*该属性定义当元素不面向屏幕时是否可见*/
    -webkit-perspective: 500;
    perspective: 500;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

.list img:first-of-type{
    z-index: 2;
}
.list img:last-of-type{
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.list>li.active>img:first-child{
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
.list>li.active>img:last-child{
    transform: rotateY(-360deg);
    -webkit-transform: rotateY(-360deg);
}

.list2{
    padding-top: .2rem;
    width: 100%;
    font-size: 0;
}
.list2>li:first-child{
    width: 22.5%;
    height: 1.75rem;
    margin-right: 3.333%;
    position: relative;
    perspective: 500;
    -webkit-perspective: 500;
}
.list2>li:nth-child(2){
    width: 48.3333%;
    height: 1.75rem;
    margin-right: 3.333%;

}
.list2>li:last-child{
    width: 22.5%;
    height: 1.75rem;
    margin-right: 0;
    position: relative;
    perspective: 500;
    -webkit-perspective: 500;
}
.list2 img{
    width: 100%;
    position: absolute;
    left: 0;
    top:0;
    backface-visibility:hidden;/*该属性定义当元素不面向屏幕时是否可见*/
    -webkit-backface-visibility:hidden;
    -webkit-perspective: 500;
    perspective: 500;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}
.list2 img:first-of-type{
    z-index: 2;
}
.list2 img:last-of-type{
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.list2>li.active>img:first-child{
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
.list2>li.active>img:last-child{
    transform: rotateY(-360deg);
    -webkit-transform: rotateY(-360deg);
}


#lulu{
    border: 2px solid #2940b1;
    border-radius: 8px;
    padding: .07rem 0;
}
.lutu{
    width:.8rem;
    height: .8rem;
    border: 1px solid #e3edff;
    border-radius: 0 8px 0 8px;
    background-image: url("../img/J00.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
}
.p4{
    font-size: .24rem;
    color: white;
    margin-bottom: .05rem;
}


/*蒙层*/
.menceng{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 20;
    left: 0;
    top:0;
    background: rgba(0,0,0,0.7);
    display: none;
}


/*活动规则*/
.huodong{
    display: none;
}
.guize{
    width: 90%;
    height: 100%;
    position: fixed;
    z-index: 50;
    left:50%;
    top:20%;
    transform: translate(-50%,0);
    background-image: url(../img/kuang.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: .56rem .3rem;
}
.guize>p{
    width: 100%;
    color: white;
    font-size: .26rem;
    line-height: .34rem;
}
.guize>h1{
    color: white;
    font-size: .44rem;
    text-align: center;
    margin-bottom: .3rem;
}
.guize span{
    color:#e5e812;
    font-size: .26rem;
}
.cha{
    width: .66rem;
    height: .66rem;
    position: absolute;
    right: 0;
    top: -1rem;
}


/*选择大奖*/
.xuanze{
    display: none;
}
.tanchuan1{
    width: 90%;
    border: 2px solid #6674ac;
    background: -webkit-linear-gradient(top, #1e5799 1%,#1b3665 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #1e5799 1%,#1b3665 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border-radius: 10px;
    position: fixed;
    z-index: 50;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-30%);
    padding: .26rem;
    padding-bottom: 0;
}
.tu3{
    width:100%;
    position: absolute;
    top: -1.8rem;
    left: 50%;
    transform: translate(-50%,0);

}
.tu4{
    width:70%;
    position: absolute;
    left: 50%;
    top: -.8rem;
    transform: translate(-50%,0);

}
.button{
    width: 1.58rem;
    height: .6rem;
    border-radius: 8px;
    background: -webkit-linear-gradient(top, #f7e3a1 0%,#e5cc7a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f7e3a1 0%,#e5cc7a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    font-size: .24rem;
    color: #6c2901;
    z-index: 60;
    position: absolute;
    left: 50%;
    bottom:-20%;
    transform: translate(-50%,0);
}
.list3>li{
    width: 22.5%;
    margin-right: 3.333%;
}
.list3>li:last-child{
    margin-right:0;
}

.list3 img{
    width: 100%;
}
.list4{
    margin-bottom: .22rem;
}
.list4>li{
    width: 22.5%;
    margin-right: 3.333%;
}
.list4>li:last-child{
    margin-right:0;
}

.list4 img:first-of-type{
    width: .3rem;
}

.list4 img:last-of-type{
    width: .3rem;
    display: none;
}
.list4 .on>img:last-of-type{
    display: block;
}
.list4 .on>img:first-of-type{
    display: none;
}
/*心愿达成*/
.dacheng{
    display: none;
}
.tanchuan{
    width: 80%;
    height: 50%;
    border: 2px solid #6674ac;
    background: -webkit-linear-gradient(top, #1e5799 1%,#1b3665 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #1e5799 1%,#1b3665 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border-radius: 10px;
    position: fixed;
    z-index: 50;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-30%);
}
.tu1{
    width:100%;
    position: absolute;
    top: -1.8rem;
    left: 50%;
    transform: translate(-50%,0);

}
.tu2{
    width:70%;
    position: absolute;
    left: 50%;
    top: -.8rem;
    transform: translate(-50%,0);

}
.lulu{
    width:50%;
    position: absolute;
    left: 50%;
    top:7%;
    transform: translate(-50%,0);
}
.tanchuan button{
    width: 1.58rem;
    height: .6rem;
    border-radius: 8px;
    background: -webkit-linear-gradient(top, #f7e3a1 0%,#e5cc7a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f7e3a1 0%,#e5cc7a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    font-size: .24rem;
    color: #6c2901;
    position: absolute;
    left: 50%;
    bottom:7%;
    transform: translate(-50%,0);
}